<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>

        <p style="margin-bottom: 30px;font-weight: bold;color: black;font-size: 15px">选择绑定车辆和驾驶员</p>
        <Row style="margin-bottom: 30px">
            <i-col span="12" style="padding-right:10px">
                <i-select  placeholder="请选择车辆"  :model.sync="carModel" filterable>
                    <i-option  v-for="item in carArr" :value="item.Id">{{ item.Platenum }}</i-option>
                </i-select>
            </i-col>
            <i-col span="12">
                <i-select  placeholder="请选择驾驶员" :model.sync="driverModel" filterable>
                    <i-option  v-for="item in driverArr" :value="item.Id">{{ item.PeopleName }}</i-option>
                </i-select>
            </i-col>
        </Row>
        <div class="action-cell">
            <div class="list-action-btn">
                <Button type="error" size="large" @click="bandCarToDriver()">绑定车辆</Button>
            </div>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                //车辆和驾驶员选择
                carModel: '',
                driverModel: '',
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ],
                carArr:[],
                driverArr:[],
                //表单数据
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                visitorId: '',
                searchUserInput:'',
                //搜索
                searchText: '',
                tableColumns: [
                    {
                        title: '驾驶员',
                        key: 'DriverName',
                        align: 'center',
                    },
                    {
                        title: '绑定车辆',
                        key: 'PlatNum',
                        align: 'center',
                    },
                    {
                        title: '驾驶员电话',
                        key: 'DriverPhone',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        'margin-right': '10px',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row)
                                        }
                                    }
                                }, '解除绑定'),
                            ])
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.visitorId = this.$route.query.id;
            this.getDriverData();
            this.getCarData();
        },

        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                        }
                    }


                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetDriverToCarList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });

            },
            remove(id) {
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否接触该绑定`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            driverid: id.DriverId,
                            carId: id.CarId,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.CancelDriverToCar, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            searchUserEvent: function () {
                let that = this;
                let para = {
                    searchTxt: this.searchUserInput
                }
                let params = that.$qs.stringify(para);

                apiUtil.post(that, apiUtil.urls.userList, params, function (res) {

                    that.tableData = res.Msg;

                });
            },
            //车辆列表
            getCarData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.CarList, para, function (res) {
                    that.$Loading.finish();
                    that.carArr = res.Msg.Arrays;

                    console.log('tableData:', res)
                });

            },
            //驾驶员列表
            getDriverData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.DriverList, para, function (res) {
                    that.$Loading.finish();

                    that.driverArr = res.Msg.Arrays;

                    console.log('tableData:', res)
                });

            },
            //绑定车辆
            bandCarToDriver: function () {
                let that = this;
                let model ={};

                model.driverid = this.driverModel;
                model.carid = this.carModel;
                model.startdate = '2118-01-01';
                model.enddate = '2118-11-01';
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.SetDriverToCar, params, function (res) {
                    that.$Loading.finish();



                });
            },
        },
    }
</script>